import React, { Component } from 'react';
import '../styles/list.scss'
import pic22 from '../assets/22.gif'
import pic23 from '../assets/23.gif'
import pic24 from '../assets/24.gif'
import pic25 from '../assets/25.gif'
import pic26 from '../assets/26.gif'
import pic27 from '../assets/27.gif'
import pic28 from '../assets/28.gif'
import pic29 from '../assets/29.gif'
import pic30 from '../assets/30.gif'
import pic31 from '../assets/31.gif'
import pic32 from '../assets/32.gif'
import pic00 from '../assets/00.jpeg'


class List extends Component {
    constructor(props){
        super(props)
        this.state = {
            currentIndex:0,
            shoplist:[//一级分类列表
                {
                    name:'活动专区',
                    list2:[//二级分类列表
                        {
                            name:'今日活动',
                            list3:[//三级分类列表
                                { pic:pic00,name:'特价燕窝' },
                                { pic:pic00,name:'特卖商品' }
                            ]
                        }     
                    ]
                },
                {
                    name:'品牌',
                    list2:[
                        {
                            name:'热销品牌',
                            list3:[
                                { pic:pic00,name:'Calvin Klein 卡尔文克莱恩' },
                                { pic:pic00,name:'Armani Beauty 阿玛尼美妆' },
                                { pic:pic00,name:'BOBBI BROWN 芭比波朗' }
                            ]
                        },
                        {
                            name:'国际大牌',
                            list3:[
                                { pic:pic00,name:'SHISEIDO 资生堂' },
                                { pic:pic00,name:'SULWHASOO 雪花秀' },
                                { pic:pic00,name:'SWAROVSKI 施华洛世奇' }
                            ]
                        }
                    ]
                },
                {
                    name:'美容护肤',
                    list2:[
                        {
                            name:'面部护理',
                            list3:[
                                { pic:pic22,name:'卸妆' },
                                { pic:pic23,name:'洁面/去角质' },
                                { pic:pic24,name:'爽肤水/喷雾' },
                                { pic:pic25,name:'乳液' },
                                { pic:pic26,name:'精华/精油' },
                                { pic:pic27,name:'面霜' },
                                { pic:pic28,name:'面膜' },
                                { pic:pic29,name:'隔离防晒' },
                                { pic:pic30,name:'润唇膏/唇膜' },
                                { pic:pic31,name:'面部套装' },
                                { pic:pic32,name:'其他面部' }
                            ]
                        },
                        {
                            name:'身体护理',
                            list3:[
                                { pic:pic00,name:'套装' },
                                { pic:pic00,name:'手部护理' },
                                { pic:pic00,name:'颈部护理' }
                            ]
                        },
                        {
                            name:'发部护理',
                            list3:[
                                { pic:pic00,name:'套装' },
                                { pic:pic00,name:'洗发' },
                                { pic:pic00,name:'护发' }
                            ]
                        },
                    ]
                },
            ]
        }
    }
    handleClick( index ){
        this.setState({currentIndex:index});
    }
    render() {
        return (
            <div className='list'>
                {/* 一级列表 */}
                <div className='left'>
                    {
                         this.state.shoplist.map((item,index)=>{
                            return (
                                <div onClick={()=>{ this.handleClick( index ) }} className={"name " + (this.state.currentIndex == index ? 'active' : '')} key={index}>{item.name}</div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {/* 二级列表 */}
                    {
                        //item2是每个二级分类
                        this.state.shoplist[this.state.currentIndex].list2.map((item2,index)=>{
                            return (
                                <div className="list2" key={index}>
                                    <h3> {item2.name} </h3>
                                    {/* 三级列表 */}
                                    <div className="list3">
                                        {
                                            //item2.list3是二级分类的三级分类列表
                                            //item3是每个三级分类
                                            item2.list3.map((item3,index)=>{
                                                return (
                                                    <div className="item3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default List;